<div class="row">

    <div class="col-md-6">

        <div class="widget wred">
            <div class="widget-head">
                <div class="pull-left">UI Elements</div>
                <div class="widget-icons pull-right">
                    <a href="#" class="wminimize"><i class="icon-chevron-up"></i></a> 
                    <a href="#" class="wclose"><i class="icon-remove"></i></a>
                </div>
                <div class="clearfix"></div>
            </div>

            <div class="widget-content">
                <div class="padd">

                    <h5>Toggle Button</h5>
                    <div class="make-switch has-switch" data-on="primary" data-off="info">
                        <div class="switch-animate switch-on"><input type="checkbox" checked=""><span class="switch-left switch-primary">ON</span><label>&nbsp;</label><span class="switch-right switch-info">OFF</span></div>
                    </div>
                    <hr>                                  

                    <h5>Button Dropdown</h5>
                    <div class="btn-group">
                        <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
                        <ul class="dropdown-menu">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li class="divider"></li>
                            <li><a href="#">Separated link</a></li>
                        </ul>
                    </div>
                    <hr>

                    <h5>Tabbable</h5>
                    <div class="tabbable" style="margin-bottom: 18px;">
                        <ul class="nav nav-tabs">
                            <li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li>
                            <li><a href="#tab2" data-toggle="tab">Section 2</a></li>
                            <li><a href="#tab3" data-toggle="tab">Section 3</a></li>
                        </ul>
                        <div class="tab-content" style="padding-bottom: 9px; border-bottom: 1px solid #ddd;">
                            <div class="tab-pane active" id="tab1">
                                <p>I'm in Section 1.</p>
                            </div>
                            <div class="tab-pane" id="tab2">
                                <p>Howdy, I'm in Section 2.</p>
                            </div>
                            <div class="tab-pane" id="tab3">
                                <p>What up girl, this is Section 3.</p>
                            </div>
                        </div>
                    </div>
                    <hr>

                    <h5>Pagination</h5>

                    <ul class="pagination">
                        <li><a href="#">Prev</a></li>
                        <li><a href="#">1</a></li>
                        <li><a href="#">2</a></li>
                        <li><a href="#">3</a></li>
                        <li><a href="#">4</a></li>
                        <li><a href="#">Next</a></li>
                    </ul>

                    <hr>

                    <h5>Labels</h5>
                    <span class="label label-danger">Default</span>
                    <span class="label label-success">Success</span>
                    <span class="label label-warning">Warning</span>
                    <span class="label label-default">Important</span>
                    <span class="label label-info">Info</span>
                    <span class="label label-primary">Success</span>
                    <hr>

                    <h5>Badges</h5>
                    <span class="label label-danger">1</span>
                    <span class="label label-success">2</span>
                    <span class="label label-warning">3</span>
                    <span class="label label-info">4</span>
                    <span class="label label-default">5</span>
                    <span class="label label-primary">6</span>
                    <hr>

                    <h5>Alerts</h5>
                    <div class="alert alert-warning">
                        Oh snap! Change a few things up and try submitting again.
                    </div>
                    <div class="alert alert-success">
                        Well done! You successfully read this important alert message.
                    </div>
                    <div class="alert alert-info">
                        Heads up! This alert needs your attention, but it's not super important.
                    </div>                                        
                    <hr>


                    <h5>Modal</h5>
                    <!-- Button to trigger modal -->
                    <a href="#myModal" class="btn btn-info" data-toggle="modal">Launch demo modal</a>

                    <!-- Modal -->

                    <hr>


                </div>
            </div>
            <div class="widget-foot">
                <!-- Footer goes here -->
            </div>
        </div>  

    </div>

</div>